<script setup lang="ts">
///title 文本的文字  selected是否被选中 focus是否有焦点
const props = defineProps(['title','selected'])

console.log('授予也')
function clickHandler(name:string){
  emit('ccc', name);
}

const emit = defineEmits<{
  //定义一个回调方法，可以理解为回调父组件传入的attribute为ccc的方法，入参为一个number类型的变量
  (e: 'ccc', num: String): void,
}>()
</script>

<template>
  <div @click="clickHandler(props.title)" class="context-area" :class="{'selected-area':props.selected}">
    {{props.title}}
  </div>
</template>

<style scoped>
.context-area {
  width: 150px;
  height: 29px;
  border: 1px solid rgba(255,255,255,0.3);
  border-bottom: none !important; /* 覆盖默认下划线样式 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 28px;
  font-weight: bold;
  background-color: transparent;
  color: rgba(255,255,255,0.8);
  padding: 14px 0;
  border-radius: 100px 0 0;
}
.selected-area{
  background-color: #3C8DF9;
  color: white;
}
.context-area:hover{
  background-color: #9BC2F6;
}
</style>